<template>
    <div>
        <el-header class="header">
            <div class="logo">
                <span class="site-name">云农业信息共享</span>
            </div>
            <el-menu class="menu" :default-active="activeMenu" mode="horizontal" @select="handleMenuSelect">
                <el-menu-item v-for="menu in userMenus" :key="menu.key" :index="menu.menus ? undefined : menu.route">
                    <template v-if="menu.menus">
                        {{ menu.title }}
                        <el-submenu v-for="subMenu in menu.menus" :key="subMenu.key" :index="subMenu.route">
                            <template #title>{{ subMenu.title }}</template>
                        </el-submenu>
                    </template>
                    <template v-else>
                        {{ menu.title }}
                    </template>
                </el-menu-item>
                <el-menu-item class="bg">
                    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                    {{ currentUser.username }}
                </el-menu-item>
                <el-menu-item class="bg" v-if="isLoggedIn" @click="handleLogout">退出</el-menu-item>
                <el-menu-item class="bg" index="/login" v-if="!isLoggedIn">登录</el-menu-item>
            </el-menu>
        </el-header>
        <router-view></router-view>


        <!-- <baidu-map class="map" :center="city" :zoom="12" :scroll-wheel-zoom="true" ref="map">
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                :autoLocation="true"></bm-geolocation>
            <bm-marker :position="{ lng: 116.404, lat: 39.915 }" @click="detail" animation="BMAP_ANIMATION_BOUNCE">
                <bm-label content="我爱北京天安门" :labelStyle="{ color: 'red', fontSize: '24px' }"
                    :offset="{ width: -35, height: 30 }" />
            </bm-marker>
        </baidu-map> -->
    </div>
</template>


<script>
export default {
    computed: {
        currentUser() {
            return this.$store.getters.currentUser;
        },
        isLoggedIn() {
            return this.$store.state.isLoggedIn;
        },
        userMenus() {
            return this.$store.getters.userMenus;
        }
    },
    data() {
        return {
            activeMenu: '1',// 默认选中的菜单项
        }
    },

    methods: {

        handleMenuSelect(index) {
            this.$router.push(index);
        },

        handleLogout() {
            // 执行退出登录的逻辑
            // 比如清除本地存储的用户信息、调用 API 退出接口等
            this.$store.dispatch('logout').then(() => {
                this.$router.push('/login'); // 退出后跳转到登录页
            }).catch(error => {
                console.error('Logout failed:', error);
            });
        }
    }
}

</script>

<style scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #409EFF;
    color: #fff;
}

.bg {
    background-color: #409EFF;
    color: #fff;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.site-name {
    font-size: 29px;
    font-weight: bold;
    margin-left: 100px;
}

.menu {
    line-height: 60px;
}

.el-menu--horizontal>.el-menu-item {
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0;
    border-bottom: 2px solid transparent;
    background-color: #409eff;
    color: white;
}
</style>